<template>
  <div>
    <div class="aaa">
      <UsmkData :name="'sss'" :flag="true" :row="1" :text="'存储惆怅长岑长错错错错'" />
    </div>
    <div class="chat-container">
      <div class="messages-wrapper">
        <div
          v-for="(msg, index) in messages"
          :key="index"
          class="message-container"
          :class="msg.role === 'user' ? 'user-message' : 'bot-message'"
        >
          <div class="avatar" :class="msg.role === 'user' ? 'user-avatar' : 'bot-avatar'">
            {{ msg.role === 'user' ? '👤' : '🤖' }}
          </div>
          <div class="content">
            <div class="username">{{ msg.role === 'user' ? '用户' : 'deepspeek' }}</div>
            <div class="bubble">{{ msg.content }}</div>
          </div>
        </div>
      </div>

      <div class="input-container">
        <input
          v-model="userInput"
          @keyup.enter="sendMessage"
          placeholder="输入消息..."
          class="message-input"
        />
        <button @click="sendMessage" class="send-button">发送</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { deepSpeech } from '@/api/component/common'
import UsmkData from '../../components/propverText/propverText.vue'

const userInput = ref('')
const messages = ref([
  {
    role: 'user',
    content: '请问今天有什么推荐书籍？'
  },
  {
    role: 'bot',
    content: '推荐您阅读《TypeScript编程实践》，非常适合当前学习阶段！'
  }
])

const sendMessage = async () => {
  const input = userInput.value.trim()
  if (!input) return

  try {
    // 添加用户消息
    messages.value.push({ role: 'user', content: input })
    userInput.value = ''

    // 获取机器人回复
    const { content } = await deepSpeech({
      content: input,
      role: 'system'
    })
    console.log(content, 1111)
    // 添加机器人回复
    messages.value.push({ role: 'bot', content })

    // 自动滚动到底部
    // setTimeout(() => {
    //   const container = document.querySelector('.messages-wrapper')
    //   if (container) {
    //     container.scrollTop = container.scrollHeight
    //   }
    // }, 50)
  } catch (error) {
    console.error('发送失败:', error)
    messages.value.push({
      role: 'bot',
      content: '服务暂时不可用，请稍后再试'
    })
  }
}
</script>

<style lang="scss" scoped>
.aaa {
  width: 130px;
  background: skyblue;
  font-size: 16px;
}

.chat-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 15px;

  .messages-wrapper {
    height: 60vh;
    overflow-y: auto;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 8px;
    margin-bottom: 15px;
  }

  .message-container {
    display: flex;
    margin-bottom: 20px;

    &.user-message {
      justify-content: flex-end;

      .bubble {
        background: #1890ff;
        color: white;
      }
    }

    &.bot-message {
      justify-content: flex-start;

      .bubble {
        background: #f0f0f0;
        color: #333;
      }
    }

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin: 0 10px;
    }

    .content {
      max-width: 70%;

      .username {
        font-size: 12px;
        color: #666;
        margin-bottom: 5px;
      }

      .bubble {
        padding: 12px 16px;
        border-radius: 12px;
        line-height: 1.5;
        word-break: break-word;
      }
    }
  }
}

.input-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 15px;
  display: flex;
  gap: 10px;
  background: #fff;
  border-top: 1px solid #eee;

  .message-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;

    &:focus {
      border-color: #1890ff;
    }
  }

  .send-button {
    padding: 12px 24px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: #40a9ff;
    }
  }
}
</style>
